<template>
	<view class="vi_sign">
		<view class="vi_sign_box" :class="boxClass||''" :style="boxStyle" v-if="!disabled">
			<vi-style-controller
				:type="setting.type"
				:color="color"
				:textColor="textColor"
				:borderColor="setting.borderColor"
				:backgroundColor="backgroundColor"
				:radius="setting.radius"
				:shadow="shadow"
				:width="setting.width"
				:height="setting.height"
				:borderWidth="setting.borderWidth"
				:borderType="borderType"
				:borderBox="setting.borderBox"
				:plain="plain"
				active>
				<text v-if="setting.mode=='value'" class="vi_sign_value">{{showValue(value)}}</text>
				<text v-else-if="setting.mode=='icon'" class="iconfont" :class="value"></text>
			</vi-style-controller>
		</view>
		<slot></slot>
	</view>
</template>

<script>
	export default{
		name:"",
		props:{
			//模式，可选value(默认)值显示、dot圆点、icon图标
			mode:{
				type:[String,null],
				default:null
			},
			value:{
				type:[Number,String,null],
				default:""
			},
			//嵌入式，以slot插入内容为基准点，置于四个方向角或自定义偏移
			inside:{
				type:[Boolean,null],
				default:false
			},
			//位置，嵌入式有效
			//leftTop、rightTop(默认)、leftBottom、rightBottom
			//{left:0, right:0, top:0, bottom:0}
			point:{
				type:[String,Object,null],
				default:null
			},
			type:{
				type:[String,null],
				default:null
			},
			color:{
				type:[String,null],
				default:""
			},
			textColor:{
				type:[String,null],
				default:""
			},
			borderColor:{
				type:[String,null],
				default:""
			},
			borderType:{
				type:[String,null],
				default:""
			},
			borderBox:{
				type:[Boolean,null],
				default:null
			},
			backgroundColor:{
				type:[String,null],
				default:""
			},
			radius:{
				type:[String,Number,Array,null],
				default:null
			},
			plain:{
				type:[Boolean,null],
				default:false
			},
			shadow:{
				type:[String,null],
				default:""
			},
			width:{
				type:[Number,String,null],
				default:""
			},
			height:{
				type:[Number,String,null],
				default:""
			},
			borderWidth:{
				type:[Number,String,null],
				default:null
			},
			fontSize:{
				type:[String,null],
				default:""
			},
			bold:{
				type:[Boolean,null],
				default:false
			},
			//显示的最大值，超过显示max+。value是数字时有效
			max:{
				type:[Number,String,null],
				default:null
			},
			boxClass:{
				type:[String,null],
				default:""
			},
			disabled:{
				type:[Boolean,null],
				default:false
			}
		},
		data(){
			return {
				
			}
		},
		computed:{
			setting(){
				return {
					mode: ["value","dot","icon"].includes(this.mode)? this.mode :"value",
					type: this.$api.isDefined(this.type)? this.type :"primary",
					radius: this.$api.isDefined(this.radius)? this.radius :"circle",
					borderWidth: this.$api.isValue(this.borderWidth)? this.borderWidth :1,
					borderColor: this.borderColor ||(this.mode=="dot"&&!this.plain?"#fff":""),
					borderBox: this.$api.isBoolean(this.borderBox)? this.borderBox :true,
					width: this.width ||(this.mode=="dot"?"0.8em":(this.mode=="icon"?"1.5em":"auto")),
					height: this.height ||(this.mode=="dot"?"0.8em":"1.5em"),
					max: this.$api.isValue(this.max)? this.max :99,
				}
			},
			boxStyle(){
				let res ={};
				this.fontSize? res["font-size"]=this.fontSize :"";
				if(this.inside){
					res["position"] = "absolute";
					let point = this.point;
					if(!point||typeof(point)=="string"){
						point = ["leftTop","rightTop","leftBottom","rightBottom"].includes(point)? point :"rightTop";
						let transX ="-50%",
							transY ="-50%";
						res["left"] = point.includes("left")? 0:"100%";
						res["top"] = point.includes("Top")? 0:"100%";
						if(this.setting.mode=="value"){
							transX ="-0.75em";
						}
						res["transform"] =`translate(${transX},${transY})`;
					}else if(this.$api.isObject(point)){
						point.left!==undefined? res["left"]=point.left :"";
						point.right!==undefined? res["right"]=point.right :"";
						point.top!==undefined? res["top"]=point.top :"";
						point.bottom!==undefined? res["bottom"]=point.bottom :"";
					}
				}
				return this.$api.objToStr(res)
			}
		},
		methods:{
			//按条件处理数值
			showValue(val){
				let max = this.setting.max;
				if(this.$api.isNumber(val,true)&&val>max){
					return max + "+"
				}
				return val
			}
		}
	}
</script>

<style lang="scss">
.vi_sign{
	display: inline-block;
	position: relative;
	.vi_sign_box{
		line-height: 1;
	}
	.vi_sign_value{
		padding: 0 0.25em;
		min-width: calc(1em - 2px);
		text-align: center;
		white-space: nowrap;
	}
}
</style>